<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Affinegy demo page</title>
    <link rel="stylesheet" href="main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
    <script>
        $(function(){
            $hovered=null;
            createSubMenu();
        });
    </script>
</head>
<body>
<div class="page">
    <div class="header">
        <div class="headerLogo"><img src="images/headerLogo.png" /></div>
        <div class="headerMenuContainer">
            <ul class="headerMenu">
                <li class="headerMenuItemWrapper">
                    <a href="#" class="headerMenuItem">WHAT'S NEW</a>
                </li>
                <li class="headerMenuItemWrapper">
                    <a href="#" class="headerMenuItem">SHARING</a>
                </li>
                <li class="headerMenuItemWrapper">
                    <a href="#" class="headerMenuItem">APPLICATIONS</a>
                </li>
                <li class="headerMenuItemWrapper">
                    <a href="#" class="headerMenuItem">SETTINGS</a>
                </li>
                <li class="headerMenuItemWrapper">
                    <a href="#" class="headerMenuItem headerMenuActive">DEVICES</a>
                </li>
                <li class="headerMenuItemWrapper">
                    <a href="#" class="headerMenuItem headerMenuItemLast">HELP</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="menu">
            <div class="leftMenuHeader">Network Device List</div>
            <ul class="leftMenu">
                <li class="menuItem">
                    <ul class="menuSub">
                        <li class="menuSubItem menuSubItemFirst"><a href="#">Mac Powerbook</a></li>
                        <li class="menuSubItem"><a href="#">IBM Lenovo Notebook</a></li>
                    </ul>
                    <a class="menuItemComputers" href ="#">Computers</a>
                </li>
                <li class="menuItem">
                    <a class="menuItemDVR"href ="#">DVR</a>
                </li>
                <li class="menuItem">
                    <ul class="menuSub">
                        <li class="menuSubItem menuSubItemFirst"><a href="#">Apple iPhone</a></li>
                        <li class="menuSubItem"><a href="#">Apple iTouch</a></li>
                        <li class="menuSubItem"><a href="#">HTC Nexus S</a></li>
                    </ul>
                    <a class="menuItemHandhelds" href="#">Handhelds <span class="buttonWithNumber">1</span></a>
                </li>
                <li class="menuItem">
                    <a class="menuItemGaming" href ="#">Gaming</a>
                </li>
                <li class="menuItem">
                    <a class="menuItemPrinters" href ="#">Printers</a>
                </li>
                <li class="menuItem">
                    <a class="menuItemStorage" href ="#">Storage</a>
                </li>
                <li class="menuItem">
                    <a class="menuItemOther" href ="#">Other</a>
                </li>
                <li class="menuItem">
                    <a class="menuItemRouter" href ="#">Router</a>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="pageHeader">Device Explorer</div>
            <div class="contentBlock">
                <div class="contentBlockLeft">
                    <div class="blockHeader">DEVICE DETAILS</div>
                    <div class="blockContent">
                        <div class="innerContentBlockLeft"><img src="images/PCBig.png" /></div>
                        <div class="innerContentBlockRight">
                            <ul>
                                <li>Device: Macintosh Powerbook</li>
                                <li>Operating System: Mac OS X 10.6.6</li>
                                <li>Digido: v. 2.5.1</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="contentBlockRight">
                    <div class="blockHeader">STATUS INDICATORS</div>
                    <ul class="bulletButtonList">
                        <li><div>Wireless Connectivity</div></li>
                        <li><div class="bulletButtonItemRed">Network Performance</div></li>
                        <li><div>Security Settings</div></li>
                        <li><div>Software Update</div></li>
                    </ul>
                </div>
            </div>
            
            <div class="contentBlock">
                <div class="blockHeader blockBigHeader">Active connection details</div>
                <div id="activeConnections" class="contentBlockLeft">
                    <h3 class="activeConnectionsDropdownLabel">Active Connections: (<span class="activeConnectionsCount">1</span>)</h3>
                    <div class="activeConnectionsDropdownContent">
                        <div>
                            <div class="activeConnectonNumber">1.</div>
                            <div class="activeConnectionContent">
                                <ul class="activeConnectonItem">
                                    <li>Wireless: Intel 8100 Wifi B/G/N</li>
                                    <li>Connection Speed: 54 Mbps</li>
                                    <li>Network Name: Home</li>
                                    <li>Security: WPA</li>
                                </ul>
                            </div>
                            <div class="activeConnectionDeactivate">Deactivate</div>
                        </div>
                    </div>
                </div>
                <div class="contentBlockRight">
					<div class="signalStrenghtContainer">
						<div class="signalStrenght">
							<div class="signalStrenghtItem signalStrenghtItem1"></div>
							<div class="signalStrenghtItem signalStrenghtItem2"></div>
							<div class="signalStrenghtItem signalStrenghtItem3"></div>
							<div class="signalStrenghtItem signalStrenghtItem4"></div>
							<div class="signalStrenghtItem signalStrenghtItem5"></div>
						</div>
						<div class="signalStrenghtLabel">
							<span>Signal Strenght</span>
						</div>
					</div>
				</div>
            </div>
            <div class="contentBlock">
                <div class="blockHeader blockBigHeader">This device is:</div>
                <div class="contentBlockLeft">
                    <ul class="bulletList bulletListDevice">
                        <li>
							Sharing a Printer
							<div class="bulletListDeviceItem bulletListDeviceItemPrinter">
                                Office Printer
								<select>
									<option>Share</option>
								</select>
							</div>
						</li>
                        <li>Able to Stream Movies</li>
                        <li>Able to Stream Music</li>
                        <li>Sharing Documents in the Cloud</li>
                        <li>Running Automated Backup</li>
                    </ul>
                </div>
                <div class="contentBlockRight"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>